<template>
    <div>
        <StoryTop></StoryTop>

        <div class="animated zoomInLeft" style="display: flex;justify-content: center">
            <!--            <div class="tiaojian" style="font-size: 15px;border: 1px solid #1ABC9C;padding: 0px 6px;color: #1ABC9C">推荐-->
            <!--            </div>-->
            <div :class="{'color1':first}" @click="first1()" class="tiaojian"
                 style="font-size: 15px;border: 1px solid #1ABC9C;padding: 0px 6px;color: #1ABC9C;margin-left: 10px">热门
            </div>
            <div :class="{'color1':second}" @click="second1()" class="tiaojian"
                 style="font-size: 15px;border: 1px solid #1ABC9C;padding: 0px 6px;color: #1ABC9C;margin-left: 10px">最新
            </div>
        </div>
        <!--        旅游故事开始-->
        <div>
            <div class="animated fadeInUp" style="width: 1200px;margin: 0 auto;">
                <!--                <div style="margin-bottom: 20px;font-size: 20px">旅游故事</div>-->


                <div class="animated fadeInUp" v-for="item in storyList" style="height: 152px;width: 100%;display: flex">
                    <div style="width: 212px;height: 136px;display: flex;justify-content: center;align-items: center">
                        <el-image
                                class="story-img"

                                :src="item.img"
                                style="width: 100%;height: 100%">

                        </el-image>
                    </div>
                    <div style="display: flex;justify-content: space-between">
                        <div style="margin-left: 20px;width: 800px;padding-right: 40px;box-sizing: border-box">
                            <div @click="toDetailStory(item.id)" class="story">{{item.title}}</div>
                            <div>{{item.description}}</div>

                        </div>
                        <div class="story-time" style="text-align: center;margin-left: 50px">{{item.formatTime}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--        旅游故事结束-->
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import StoryTop from "../components/top/StoryTop";
    import Foot from "../components/bottom/Foot";

    export default {
        name: "Story",
        components: {Foot, StoryTop},
        data() {
            return {
                num: 0,
                first: true,
                second: false,
                storyList: []
            }
        },
        created() {
            this.getStoryInfo();
        },
        methods: {
            toDetailStory(id) {
                this.$router.push({
                    query: {
                        id: id
                    },
                    path: '/storydetail'
                })
            },
            first1() {
                this.first = true;
                this.second = false;
                this.num = 0
                this.getStoryInfo();


            },
            second1() {
                this.first = false;
                this.second = true;
                this.num = 1
                this.getStoryInfo();
            },
            async getStoryInfo() {
                let {data: res} = await this.$http.get('story/' + this.num)
                console.log(res)
                this.storyList = res.data;
            }
        }
    }
</script>

<style scoped>
    .color1 {
        background-color: #1ECE9C !important;
        color: #ffffff !important;
    }

    .tiaojian {
        margin-top: 20px;
        transition: all 0.5s;
        cursor: pointer;
    }

    .tiaojian:hover {
        color: #ffffff !important;
        background-color: #1ECE9C;
    }
</style>